<template >
    <div class="disctrict">
        <div class="header">
            <vue-header>
                <a href="JavaScript;:" slot="left" class="el-icon-arrow-left fl left"></a>
                <span class="fl middle" slot="middle">广州</span>
                <router-link to="/address" slot="right" class="fr right">切换城市</router-link>
            </vue-header>
        </div>
    </div>
    
</template>
<script>
    import header from "../common/header/header.vue"
    export default {
        name: "disctrict",
        components: {
            "vue-header": header
            
        }
    }
</script>
<style lang="less" scoped>
    .disctrict {
        .header {
            .el-icon-arrow-left {
                line-height: 30px;
            }
            .middle {
                 width: 100%;
                 padding: 0 60px;
                 box-sizing: border-box;
                 margin: 0px;
             }
             .left {
                 position: absolute;
                 top: 0px;
                 left: 0px;
                 height: 30px;
                 width: 60px;
                 margin: 0px;
             }
             .right {
                 position: absolute;
                 top: 0px;
                 right: 20px;
                 height: 30px;
                 width: 60px;
                margin: 0px;
                text-align: center;
             }
        }

    }
</style>